<template>
  <div class="deviceChange">
    <!-- 搜索 -->
    <div class="form_search">
      <el-form :model="formR" @submit.native.prevent>
        <el-input v-model="formR.imei" placeholder="在此输入IMEI编号进行搜索"></el-input>
      </el-form>
      <el-button type="primary" slot="append" @click="condition" class="dev_search">搜索</el-button>
    </div>
    <!-- 筛选 -->
    <search @search_data="search_data"></search>
    <!-- 表单列表 -->
    <div class="device-manage">
      <el-table :data="listData" stripe :header-cell-style="getRowClass" v-loading="loading">
        <el-table-column prop="num" label="序号" width="50"></el-table-column>
        <el-table-column prop="imei" label="IMEI号"></el-table-column>
        <el-table-column prop="dev_equip_id" label="位置编号"></el-table-column>
        <el-table-column prop="devname" label="设备类型">
          <template slot-scope="scope">
            <div style="display: inline;" v-if="scope.row.devname =='fireplug'">消防栓</div>
            <div style="display: inline;" v-if="scope.row.devname =='scm'">烟感设备</div>
          </template>
        </el-table-column>
        <el-table-column prop="areaName" label="设备安装区域"></el-table-column>
        <el-table-column prop="site_name" label="设备安装场所名称"></el-table-column>
        <el-table-column prop="equip_site_address" label="详细地址"></el-table-column>
        <el-table-column prop="update_time" label="安装时间"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <!-- <el-button type="text" size="small"  title="更换设备"  v-has-permission="'change_replace'" @click="handelChange(scope.row)" style='padding-left:0'>
              <img src="../../../../../static/image/device/change.png">
            </el-button>-->
            <!-- <el-button type="text" size="small" title="修改地址"
              v-has-permission="'change_edit'"
            @click="handelEdit(scope.row)" style='margin-left:0'>
              <img src="../../../../../static/image/device/edit.png">
            </el-button>-->
            <el-button
              type="text"
              size="small"
              title="查看"
              @click="handelSee(scope.row)"
              v-has-permission="'change_query'"
            >
              <img src="../../../../../static/image/device/see.png">
            </el-button>
            <el-button
              type="text"
              size="small"
              title="删除"
              @click="handleDelete(scope.row)"
              v-has-permission="'change_delete'"
              style="margin-left:5px"
            >
              <img src="../../../../../static/image/device/delect.png">
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <page-list
        :size.sync="dev_pageSize"
        :total="totals"
        :current.sync="dev_currentPage"
        @change="getListData"
      ></page-list>
      <!-- Form 弹框查看 -->
      <el-dialog
        :close-on-click-modal="false"
        :title="title"
        :visible.sync="dialogTableVisible"
        :modal-append-to-body="false"
        class="dialog-sees"
      >
        <el-form :model="form" @submit.native.prevent>
          <el-form-item label="设备编号：" v-if="showImei">{{form.imei}}</el-form-item>
          <el-form-item label="设备编号：" v-if="!showImei" class="changesImei">
            <el-input v-model="form.imei"></el-input>
          </el-form-item>
          <el-form-item label="位置编号：">{{form.dev_equip_id}}</el-form-item>
          <el-form-item label="设备类型：" v-if="form.devname =='fireplug'">消防栓</el-form-item>
          <el-form-item label="设备类型：" v-if="form.devname =='scm'">烟感设备</el-form-item>

          <el-form-item label="安装区域：">{{form.areaName}}</el-form-item>
          <el-form-item label="安装场所：">{{form.site_name}}</el-form-item>
          <el-form-item label="详细地址：">{{form.equip_site_address}}</el-form-item>
          <el-form-item label="安装时间：">{{form.update_time}}</el-form-item>
        </el-form>
        <div slot="footer" style="text-align: center;" v-if="seeImei">
          <el-button
            style="padding: 5px 25px;background-color: rgb(178, 186, 211);border-color:rgb(178,186,211);color:rgb(255, 255, 255);"
          >取 消</el-button>
          <el-button
            type="primary"
            style="padding: 5px 25px;background-color:#EB3838;border-color:#EB3838;"
          >确 定</el-button>
        </div>
      </el-dialog>
      <!-- 修改信息 -->
      <!-- <el-dialog
        :close-on-click-modal="false"
        :title="title"
        :visible.sync="dialogFormVisible"
        :modal-append-to-body="false"
        class="dialog-sees">
        <el-form :model="form" @submit.native.prevent>
          <el-form-item label="位置编号：">{{form.dev_equip_id}} </el-form-item>
          <el-form-item label="设备编号：">{{form.imei}}</el-form-item>
          <el-form-item label="区域名称：">
             <el-input v-model="form.imei" ></el-input>
          </el-form-item>
          <el-form-item label="场所名称：">
             <el-input v-model="form.imei" ></el-input>
          </el-form-item>
          <el-form-item label="详细地址：">
            <el-input v-model="form.imei" ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer"  style="text-align: center;" >
          <el-button style='padding: 5px 25px;background-color: rgb(178, 186, 211);border-color:rgb(178,186,211);color:rgb(255, 255, 255);'>取 消</el-button>
          <el-button type="primary" style="padding: 5px 25px;background-color:#EB3838;border-color:#EB3838;">确 定</el-button>
        </div>
      </el-dialog>-->

      <!--删除弹出框-->
      <delete-dialog :is-show="deleteDialogShow" :desc="desc" @close="handleClose"></delete-dialog>
    </div>
  </div>
</template>

<script>
import Config from "@/config";
// import { regionDataPlus } from "element-china-area-data";
import { regionDataPlus } from "static/js/regionData";
import { mapGetters } from "vuex";
import Search from "./Search";
import moment from "moment";
import { log } from "util";
import PageList from "@/components/PageList";
import DeleteDialog from "../../../../components/CommonDialog";

export default {
  name: "DeviceManage",
  components: {
    Search,
    PageList,
    DeleteDialog
  },
  data() {
    return {
      ops: {
        bar: {
          background: "#DDDEE0"
        }
      },
      // 查询
      formR: {},
      // 列表分页
      totals: 0,
      dev_currentPage: 1,
      dev_pageSize: 15,
      inputs: 15,
      //列表
      listData: [],
      // loading
      loading: true,
      // 查看
      dialogTableVisible: false,
      showImei: true,
      seeImei: true,
      // 弹框名称
      title: "",
      //弹框数据
      form: {},
      // 删除弹框
      deleteDialogShow: false,
      deleteObject: {},
      desc: "",
      //修改信息弹框
      dialogFormVisible: false,
      obj: {}
    };
  },
  methods: {
    // 筛选条件
    search_data(datas) {
      console.log(datas);
      this.currentPage = 1;
      let data = JSON.parse(JSON.stringify(datas));

      this.loading = true;
      let obj = {};
      switch (data.typestatus) {
        case "消防栓":
          obj.devname = "fireplug";
          break;
        case "烟感设备":
          obj.devname = "scm";
          break;
      }
      this.obj = JSON.parse(JSON.stringify(obj));
      this.getListData();
    },

    // 表头添加背景颜色
    getRowClass({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return "background:#f6f6f6";
      } else {
        return "";
      }
    },
    // 获取列表
    getListData() {
      var params = {};
      this.loading = true;
       if (this.district.districtType === 1) {
       params.country = '86';
      }else if (this.district.districtType === 2) {
        params.province = this.district.provinceCode;
      } else if(this.district.districtType === 3) {
        params.city = this.district.cityCode;
      }

      params.imei = this.formR.imei ? this.formR.imei : undefined;
      params.devname = this.obj.devname ? this.obj.devname : undefined;
      let url = `${
        Config.DEVICE_MANAGE_URL
      }/inventory/device_equiped_list?page=${this.dev_currentPage - 1}&size=${
        this.dev_pageSize
      }&devtype=nbiot&subtype=collective`;

      this.$http.get(url, params).then(res => {
        this.totals = res.allcount;
        if(res.array.length){
          res.array.map((item, i) => {
            if (this.dev_currentPage === 1) {
              item.num = i + 1;
            } else {
              item.num = (this.dev_currentPage - 1) * this.dev_pageSize + i + 1;
            }
            this.handleData(item);
            item.update_time = moment(item.update_time).format(
              "YYYY-MM-DD HH:mm:ss"
            );
          });
          this.listData = res.array;
          this.loading = false;
        } else {
          this.listData = res.array;
          this.loading = false;
        }

      }).catch(e =>{
        this.listData = res.array;
        this.loading = false;
      })
    },
    condition() {
      this.dev_currentPage = 1;
      this.getListData();
    },
    /**
     * 对展示数据进行预处理
     * */
    handleData(item) {
      const province = this.getAreaObj(regionDataPlus, item.province);
      if (
        item.city === "419000" ||
        item.district === "419001" ||
        item.district === "济源市"
      ) {
        item.areaName = `${province.label}济源市`;
      } else {
        const city = this.getAreaObj(province.children, item.city);
        const district = item.district
          ? this.getAreaObj(city.children, item.district)
          : { label: "" };
        item.areaName = `${province.label}${city.label}${district.label}`;
      }
    },
    /**
     * 获取区域信息
     * @param {Array} arr
     * @param {String} value
     * @return {Object} obj
     * */
    getAreaObj(arr, value) {
      return arr.find(res => res.value === value);
    },
    // 查看
    handelSee(data) {
      // console.log(data)
      for (var i in data) {
        this.form[i] = data[i];
      }
      this.form.update_time = moment(this.form.update_time).format(
        "YYYY-MM-DD HH:mm:ss"
      );
      this.title = "预览";
      this.dialogTableVisible = true;
      this.showImei = true;
      this.seeImei = false;
    },
    //更改iemi
    /**
     *
    handelChange (data) {
      this.form = JSON.parse(JSON.stringify(data))
      this.title = "更换设备";
      this.dialogTableVisible = true;
      this.showImei = false
      this.seeImei = true
    },
     */
    //修改信息
    /**
    *
    handelEdit(data){
      this.form = JSON.parse(JSON.stringify(data))
      this.title = "地址修改";
      this.dialogFormVisible = true;
    },
    */
    //删除
    handleDelete(data) {
      // console.log(data)
      let url = `${
        Config.DEVICE_MANAGE_URL
      }/device_modify_history/count_by_action_imei`;
      let param = {
        user_id: this.user.id,
        action_name: "unbind"
      };
      this.$http.get(url, param).then(res => {
        // console.log(res)
        if (res.count <= 20) {
          this.deleteObject = data;
          this.desc = `确定要删除${data.imei}吗？`;
          this.deleteDialogShow = true;
        } else {
          this.$message({
            message:
              "您已删除超过20个设备,已通知主运营公司管理员,如需删除设备，请于明天再进行删除操作。",
            type: "error"
          });
        }
      });
    },
    handleClose(id) {
      this.deleteDialogShow = false;
      if (!id) {
        this.deleteObject = {};
        return;
      }
      let url = `${Config.DEVICE_MANAGE_URL}/inventory/device_unbind`;
      let param = {
        devtype: this.deleteObject.devtype,
        devname: this.deleteObject.devname,
        id: this.deleteObject.id,
        imei: this.deleteObject.imei,
        user_id: this.deleteObject.id,
        subtype: this.deleteObject.subtype
      };
      this.$http
        .post(url, param)
        .then(res => {
          this.deleteObject = {};
          this.$message.success("删除设备变更信息成功！");
          // 重新拉数据
          // this.dev_currentPage = 1
          // this.dev_pageSize = 15
          this.getListData();
        })
        .catch(e => {
          this.deleteObject = {};
          this.$message({
            message: "删除设备变更信息失败！",
            type: "error"
          });
        });
    }
  },
  created() {
    this.getListData();
  },
  computed: {
    ...mapGetters("user", {
      module: "dealedModule",
      user: "getUser",
      role: "getRole",
      district: "getDistrict"
    })
  }
};
</script>

<style lang='scss' >
@import "../../../../../static/scss/common";
.deviceChange {
  width: 100%;
  height: 100%;
  // 搜索
  .form_search {
    width: 100%;
    height: 42px;
    .el-form {
      width: 500px;
      float: left;
      height: 42px;
      line-height: 42px;
      box-shadow: 5px 5px 0px 0px rgba(34, 34, 34, 0.1);
      border: 0;
      .el-input {
        .el-input__inner {
          height: 42px;
          border-radius: 0;
          border: 0;
          line-height: 42px;
        }
        .el-input__inner:hover {
          border-color: 0;
        }
      }
    }
    .dev_search {
      width: 80px;
      height: 42px;
      background: rgba(235, 56, 56, 1);
      box-shadow: 5px 5px 0px 0px rgba(34, 34, 34, 0.1);
      padding: 0;
      border-radius: 0;
      font-size: 14px;
    }
  }
  //列表
  .device-manage {
    width: 100%;
    height: auto;
    background: $white;
    margin-top: 24px;
    .export {
      height: 24px;
      line-height: 24px;
      margin-right: 27px;
      text-align: right;
      padding-top: 12px;
    }
    // 查看
    .dialog-sees.el-dialog__wrapper {
      .el-dialog {
        width: 420px;
        height: 366px;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto !important;
        .el-dialog__body {
          .el-form {
            .el-form-item {
              .el-form-item__label {
                line-height: 36px;
              }
              .el-form-item__content {
                line-height: 36px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
            }
            //更换设备
            .el-form-item.changesImei {
              .el-form-item__content {
                line-height: 32px;
                .el-input {
                  .el-input__inner {
                    height: 32px;
                    line-height: 32px;
                    width: 260px;
                    border-radius: 0;
                  }
                }
              }
            }
          }
        }
        .el-dialog__footer {
          padding: 30px 0;
          background: $white;
        }
      }
    }
    // 删除
    .el-dialog__wrapper.btndelete {
      .el-dialog {
        width: 380px;
        height: 182px;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto !important;
        .el-dialog__header {
          .el-dialog__title {
            font-size: 14px;
            line-height: 0;
            color: #303133;
            float: left;
          }
          .el-dialog__headerbtn {
            top: 12px;
          }
        }
        .el-dialog__body {
          border: 0;
          padding-top: 0;
        }
      }
    }
  }
}
</style>
